<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="我的私信"></fa-navbar>
		<!-- 用户信息 -->
		<u-sticky :enable="false"><fa-user-header :user="vuex_user"></fa-user-header></u-sticky>
		<!-- 内容 -->
		<view class="comment" v-for="(res, index) in messageList" :key="res.id">
			<view class="u-p-30 ne">
				<view class="left"><image :src="res.from && res.from.avatar" mode="aspectFill"></image></view>
				<view class="right">
					<view class="top">
						<view class="name u-flex">
							<view class="text-bold">{{ res.from && res.from.nickname }}</view>
							<view class="u-tips-color u-font-24 u-m-l-20">发送于{{ res.create_date }}</view>
						</view>
					</view>
					<view class="content u-content-color">{{ res.content }}</view>
					<view class="bottom u-flex u-row-right">
						<view class="u-m-l-10">
							<u-tag :bg-color="theme.bgColor" :color="theme.color" text="发私信" shape="circle" type="primary" mode="dark" @click="sendMsg(res)" />
						</view>
						<view class="u-m-l-10" v-if="res.isread">
							<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="已读" shape="circle" type="primary" />
						</view>
						<view class="u-m-l-10" v-if="!res.isread">
							<u-tag
								:bg-color="theme.bgColor"
								:color="theme.color"
								text="标记为已读"
								shape="circle"
								type="primary"
								mode="dark"
								@click="messages(res, index, 'mark')"
							/>
						</view>
						<view class="u-m-l-10"><u-tag text="删除" shape="circle" type="error" mode="dark" @click="messages(res, index, 'del')" /></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="!messageList.length"></wanl-empty>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="messageList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.bgColor}" :custom-style="{backgroundColor:theme.lightColor}"></u-back-top>
		<!-- 发送私信 -->
		<fa-send-msg :user-id="from_user_id" ref="faSend"></fa-send-msg>
		<!-- 全部标记为已读 -->
		<fa-add-ask type="custom" @custom="custom" icon="checkmark" :icon-style="{color:theme.bgColor}" :custom-style="{backgroundColor:theme.lightColor}"></fa-add-ask>
		<!-- 确认框 -->
		<u-modal v-model="customShow" content="确定全部标记为已读吗？" :show-cancel-button="true" @confirm="confirmCustom"></u-modal>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		let query = this.$Route.query || e || {};
		let act = query.act || '';
		if (act == 'marktop') {
			this.messages({ id: '' }, 0, 'marktop');
		}
		this.getUserMessage();
	},
	data() {
		return {		
			from_user_id: '',
			messageList: [],
			scrollTop: 0,
			background: {
				backgroundColor: '#2979ff'
			},
			page: 1,
			has_more: false,
			customShow: false,
			status: 'loadmore'
		};
	},
	methods: {
		getUserMessage: async function() {
			let res = await this.$api.getUserMessage({
				id: this.vuex_user.id,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			this.messageList = this.messageList.concat(res.data.data);
			this.has_more = res.data.last_page < res.data.current_page;
		},
		//操作
		messages: async function(item, index, act) {
			let res = await this.$api.getUserMessage({
				message_id: item.id,
				id: this.vuex_user.id,
				act: act
			});
			if(act!='marktop'){
				this.$u.toast(res.msg);
			}
			if (!res.code) {
				return;
			}
			switch (act) {
				case 'mark':
					item.isread = true;
					break;
				case 'del':
					this.messageList.splice(index, 1);
					break;
				case 'markall':
					this.page = 1;
					this.has_more = false;
					this.messageList = [];
					this.getUserMessage();
					break;
			}
		},		
		//发送私信
		sendMsg(item) {
			this.from_user_id = item.from_user_id;
			this.$refs.faSend.show();
		},
		custom() {
			this.customShow = true;
		},
		confirmCustom() {
			this.messages({ id: '' }, 0, 'markall');
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getUserMessage();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}

.comment {
	padding: 30rpx 30rpx 0 30rpx;

	.ne {
		display: flex;
		background-color: #ffffff;
		box-shadow: 0 0 5px rgba(0, 134, 243, 0.1);
		border-radius: 3px;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
				word-break: break-word;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.right-item {
	margin: 0 20rpx;
	position: relative;
}
.sendMsg {
	width: 600rpx;
	height: 420rpx;

	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
}
</style>
